<template>
    <div class="ressiue-container">
        <div class="tablePlatForm">
          <div class="ressiueOrder">
            <el-form :model="ruleForm" :rules="rules"  label-width="70px">
              <el-row >
                <el-col :span="8">
                  <el-form-item label="订单平台" >
                    <el-select v-model="ressiueContent.channelCode" placeholder="请选择" allow-create filterable clearable @change="getChVal" size="medium">
                      <el-option
                        v-for="item in channelContent"
                        :key="item.id"
                        :label="item.channelName"
                        :value="item.id+''">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="姓名" >
                    <el-input v-model="ressiueContent.receiverName" size="medium"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="省" >
                    <el-input v-model="ressiueContent.province" size="medium"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row >
                <el-col :span="8">
                  <el-form-item label="订单公司" >
                    <el-select v-model="ressiueContent.companyCode" placeholder="请选择" allow-create filterable clearable size="medium">
                      <el-option
                        v-for="item in companyContent"
                        :key="item.id"
                        :label="item.companyName"
                        :value="item.companyCode+''">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="联系方式" >
                    <el-input v-model="ressiueContent.receiverPhone" size="medium"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="市" >
                    <el-input v-model="ressiueContent.city" size="medium"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row >
                <el-col :span="8">
                  <el-form-item label="出仓仓库" >
                    <el-select v-model="ressiueContent.depotCode" placeholder="请选择" allow-create filterable clearable size="medium">
                      <el-option
                        v-for="item in stockIn"
                        :key="item.id"
                        :label="item.depotName"
                        :value="item.id+''">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="订单备注">
                    <el-input v-model="ressiueContent.orderCustomerNote" size="medium"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="区" >
                    <el-input v-model="ressiueContent.district" size="medium"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="16">
                  <el-form-item label="地址">
                    <el-input v-model="ressiueContent.receiverAddress" size="medium" ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
            <div class="channelTable">
                <el-table
                :data="list.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                ref="multipleTable"
                border
                highlight-current-row
                style="width: 100%">
                <el-table-column label="单选" width="65">
                    <template slot-scope="scope">
                      <el-radio class="radio"  v-model="radio"  :label="scope.$index"  @change.native="getTemplateRow(scope.$index,scope.row)">&nbsp;</el-radio>
                    </template>
                </el-table-column>
                <el-table-column
                :show-overflow-tooltip="true"
                prop="channelName"
                label="订单平台"
                width="150">
                </el-table-column>
                <el-table-column
                :show-overflow-tooltip="true"
                width="150"
                prop="channelItemCode"
                label="渠道商品编码" >
                </el-table-column>
                <el-table-column
                prop="channelItemName"
                label="渠道商品名称"
                :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column
                :show-overflow-tooltip="true"
                width="100"
                prop="channelPrice"
                label="售价" >
                </el-table-column>
                <el-table-column
                width="150"
                label="购买数量">
                <template slot-scope="scope">
                   <el-input v-model="scope.row['purchaseNum']"  size="mini" @input="purNum"></el-input>
                </template>
                </el-table-column>
                </el-table>
            </div>
        </div>
         <div class="pge">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageCount">
            </el-pagination>
        </div>
        <div class="btnTest" style="width:99%;text-align:center;padding-top:30px;">
            <el-button size="medium" type="primary" @click="confirmRessiue" style="margin-right:30px;">确定</el-button>
            <el-button size="medium" @click="backPage">取消</el-button>
        </div>
    </div>
</template>
<script>
import {localStorage} from "js/localStorage"
export default {
    data(){
        return{
            radio:0,
            companyContent:[],
            channelContent:[],
            stockIn:[],
            list:[],
            id:'',
            num:'',
            items:[],
            companyCode:'',
            orderCode:'',
            dataList:{},
            oriOrder:{},
            checked:false,
            orderItems:[],
            ruleForm:{

            },
            rules:{

            },
            ressiueContent:{},
            pageIndex:1,
            pageSize:10,
            pageCount:0,
            currentPage:1,
            userId:'',
            price:{},
            selection:[],
            channelItemCode:'',
            channelItemName:'',
            purchaseNum:'',
            channelId:''
        }
    },
    mounted(){
        this.getStore()
    },
    created(){
        this.userId=localStorage.get('userID')
        this.id=this.$route.query.ressiue
        this.ressiueOrder()
        this.getAllCompany()
        this.getChannel()

    },
    methods:{
        ressiueOrder(){
            let parmas={
                complainId:this.id
            }
            let success=data=>{
                if(data.code=='OK'){
                    this.ressiueContent=data.data
                    this.channelId=data.data.channelCode
                    this.getTable()
                }else{
                   return  this.$message.error(data.msg)
                }
            }
            this.api.complainApplyRessiueInfo(parmas,success)
        },
        getTemplateRow(index,row){                                 //获取选中数据
          this.channelItemCode=row.channelItemCode
          this.channelItemName=row.channelItemName
        },
        getTable(){
            let parmas={
                channelId:this.channelId
            }
            let success=data=>{
                if(data.code=="OK"){
                    this.list= data.data;
                    this.pageCount=this.list.length
                    this.$nextTick(function() {
                        var objectData={}
                        let index = 0;
                        for(let i =0 ;i<this.list.length;i++){
                            if(this.list[i].channelItemCode === this.ressiueContent.channelItemCode){
                              objectData = this.list[i];
                                index = i;
                                break;
                            }
                        }
                        if(index>0){
                            this.list.splice(index,1);
                            this.list.unshift(objectData)
                        }
                    });
                }else{
                    this.$message.error(data.msg)
                }
            }
            this.api.productQueryByChannel(parmas,success)
        },
        handleSizeChange(val) {
            this.pageSize =val;
        },
        handleCurrentChange(val) {
            this.currentPage = val;
        },
        getStore(){
            let success=data=>{
                if(data.code=="OK"){
                    this.stockIn=data.data
                }else{
                    this.$message.error(data.msg)
                }
            }
            this.api.erpComplainDepotListAll({},success)
        },
        getAllCompany(){
            let success=data=>{
                if(data.code=="OK"){
                    this.companyContent=data.data
                }else{
                    this.$message.error(data.msg)
                }
            }
            this.api.companyAll({},success)
        },
        getChannel(){
            let success=data=>{
                if(data.code=="OK"){
                    this.channelContent=data.data
                }else{
                    this.$message.error(data.msg)
                }
            }
            this.api.channelAll({},success)
        },
        backPage(){
            this.$router.push({
                path:'/complaint'
            })
        },
        getChVal(id){
            let parmas={
                channelId:id
            }
            let success=data=>{
                if(data.code=="OK"){
                    this.list= data.data;
                    this.pageCount=this.list.length
                        var obj={}
                        let index = 0;
                        for(let i =0 ;i<this.list.length;i++){
                            if(this.list[i].channelItemCode === this.ressiueContent.channelItemCode){
                                obj = this.list[i];
                                index = i;
                                break;
                            }
                        }
                        if(index>0){
                            this.list.splice(index,1);
                            this.list.unshift(obj)
                        }
                 }else{
                    this.$message.error(data.msg)
                }
            }
          this.api.productQueryByChannel(parmas,success)
        },
        purNum(num){
          this.num=num
        },
        //补发确定接口
        confirmRessiue(){
            if(this.radio == 0){
              this.channelItemCode=this.list[0].channelItemCode
              this.channelItemName=this.list[0].channelItemName
            }
            let parmas={
                channelCode:this.ressiueContent.channelCode,
                companyCode:this.ressiueContent.companyCode,
                receiverName:this.ressiueContent.receiverName,
                receiverPhone:this.ressiueContent.receiverPhone,
                receiverAddress:this.ressiueContent.receiverAddress,
                province:this.ressiueContent.province,
                city:this.ressiueContent.city,
                district:this.ressiueContent.district,
                depotCode:this.ressiueContent.depotCode,
                orderCustomerNote: this.ressiueContent.orderCustomerNote,
                userId:this.userId,
                channelItemName:this.channelItemName,
                channelItemCode:this.channelItemCode,
                purchaseNum:this.num,
                complainId: this.ressiueContent.complainId
            }
            let success=data=>{
              if(data.code=="OK"){
                  this.$message.success("申请补发订单成功")
                  this.$router.go(-1)
              }else{
                  this.$message.error(data.msg)
              }
            }
            this.api.complainApplyRessiue(parmas,success)
        }
    }
}

</script>
<style scoped>
.el-form-item{
  margin-bottom:10px !important;
}
</style>
<style lang="scss" scoped>
.ressiue-container{
    .tablePlatForm{

        .el-select{
            width:80%;
        }
        label{
            width:70px !important;
        }
        .channelTable{
            height:auto;
            margin-top:2px;
            border-left: 2px solid #e8e8e8;
            border-right: 2px solid #e8e8e8;
            border-bottom: 2px solid #e8e8e8;
        }
    }
    .pge{
        text-align:right;

    }
  .ressiueOrder{
    background: #fff;
    padding:0 10px;
    border-left: 2px solid #e8e8e8;
    border-right: 2px solid #e8e8e8;
    border-bottom: 2px solid #e8e8e8;
  }

}
</style>
